<template>
	<view>
		<view class="container" v-if="list.length > 0">
			<view class="box" v-for="(item, index) in list" :key="index">
				<view class="uni-inline-item">
					<image mode="widthFix" :src="item.productImage" class="pic"></image>
					<view class="uni-flex-item">
						<view class="h3"><text>车牌号</text> {{item.carLicense}}</view>
						<view class="p">产品名称：{{item.productName}}</view>
					</view>
				</view>
				<view class="ft">
					<view>出库时间：{{item.buyTime}}</view>
					<view>质保时间：{{item.activeTime}}</view>
				</view>
			</view>
			<view class='loadingicon flex-row row-center-wrapper' v-if="list.length>5">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		<view v-else>
			<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无记录" width="320" height="320"
				textSize="24"></u-empty>
		</view>
	</view>
</template>


<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getSaleProduct,
		getUserProduct
	} from '@/api/saleBack'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
			}

		},

		onLoad() {
			// this.getUserProduct();
		},

		onShow() {
			if (this.isLogin) {
				this.page = 1;
				this.list = []
				this.loadend = false;
				this.getUserProduct();
			} else {
				toLogin();
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userType']),
		methods: {
			getUserProduct() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				let data = {
					userInfoId: that.uid,
					page: that.page,
					pageSize: that.limit,
				}
				if (that.$store.state.app.role == 'CAR') {
					getUserProduct(data)
						.then(res => {
							that.list = res.value.list;
						}).catch(err => {
							that.loading = false;
							that.loadTitle = "加载更多";
						});
				} else {
					getSaleProduct(data)
						.then(res => {
							let list = res.value.list || [];
							let loadend = list.length < that.limit;
							that.list = that.$util.SplitArray(list, that.list);
							that.$set(that, 'list', that.list);
							that.loadend = loadend;
							that.loading = false;
							that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
							that.page = that.page + 1;
						}).catch(err => {
							that.loading = false;
							that.loadTitle = "加载更多";
						});
				}
			}
		},
		
		onReachBottom: function() {
			this.getUserProduct();
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.container {
		padding: 20rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.container .box {
		margin-bottom: 20rpx;
	}

	.container .uni-inline-item {
		border-radius: 14rpx 14rpx 0 0;
		padding: 20rpx;
		background: #fff;
	}

	.container .h3 {
		font-size: 34rpx;
		font-weight: bold;
	}

	.container .h3 text {
		color: #fff;
		font-size: 22rpx;
		background: #06A972;
		border-radius: 20rpx 0;
		margin: 0 10rpx 0 0;
		padding: 6rpx 10rpx;
	}

	.container .pic {
		width: 145rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.container .p {
		color: #06A972;
		font-size: 26rpx;
		margin-top: 6rpx;
		background: #E5F6F1;
		border-radius: 6rpx;
		padding: 10rpx;
	}

	.container .ft {
		padding: 10rpx 20rpx;
		background: linear-gradient(270deg, #fff 0%, #E5F6F1 100%);
		border-radius: 0px 0px 14rpx 14rpx;
	}
</style>